<!--
 * @Description: css-翻页效果
 * @Author: wws1993
 * @Date: 2020-12-02 14:12:48
 * @LastEditTime: 2020-12-03 11:19:04
 * @LastEditors: wws1993
 * @FilePath: \todoManager\src\components\MailListModule\CssTurnPage.vue
-->

<template>
  <div :class="{book: true, open: isOpenCover, close: isBookClose}">
    <!-- 封面 -->
    <div
      class="page cover"
      :class="{open: isOpenCover}"
      :style="`z-index:${data.length + 2}`"
      @click="pageNum = pageNum == -1 ? 0 : -1"
      >
      <div class="front">
        <img src="./img/cover.jpg" alt="">
      </div>
      <div class="back"></div>
    </div>
    <!-- 页面 -->
    <template v-for="(item, key) in data">
      <div
        :key="key" 
        :class="{page: true, open: pageNum - 1 >= key}"
        @click="pageNum > key ? pageNum -- : pageNum ++"
        :style="`z-index:${(data.length + 1) - key}`"
        >
        <div class="front">
          <slot :item="item"/>

          <span class="page—footer">第 {{key + 1}} 页，共 {{ data.length }} 页</span>
        </div>
        <div class="back">
          <template v-if="key === data.length - 1">
            <div class="copyRight">
              <p>Made In Ka·Fa</p>
              <p>Author: wws1993</p>
              <p>Email: 15696141050@163.com</p>
            </div>
          </template>
        </div>
      </div>
    </template>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import {Component, Prop} from 'vue-property-decorator';

@Component({})
export default class Tr extends Vue {
  @Prop() private data!: any[];

  private pageNum = -1;

  get isOpenCover() {
    return this.pageNum >= 0;
  }

  get isBookClose() {
    return this.pageNum >= this.data.length;
  }

  private openCover() {
    this.pageNum = 0;
  }

  private closeCover() {
    this.pageNum = -1;
  }

  private setNumber(num: number) {
    this.pageNum = num;
  }
}
</script>

<style lang="scss" scoped>
.book {
  transform-style: preserve-3d;
  transition: 1s;
  width: 100%;
  height: 500px;
  margin-left:-50%;
  &.open{
    transform: scale(.9) rotateX(30deg) rotateZ(0deg) rotateY(0deg);
    margin-left:0;
  }
  &.close{
    transform: scale(1) translateX(25%);
    margin-left:0;
  }

  div{position:relative;}

  .page{
    width:50%; height:100%; box-shadow:0 0 8px 1px #cacaca;
    position:absolute; top:20px; left:50%; z-index:1;
    transform-style:preserve-3d; transform-origin:left; transition: 1s;
    .front, .back{
      position:absolute; top:0; left:0; right:0; bottom:0;
    }
    .front{
      background:#fcfcfc; transform: translateZ(.2px); padding:20px;
      backface-visibility:hidden; position:relative; height:100%;
      .page—footer{
        position:absolute; right:10px; bottom:5px;
        font-size:12px; color:#999;
      }
    }
    .back{background:url('./img/paper.jpg') no-repeat; background-size:cover;}

    &.cover{
      .front{padding:0;}
      img{width:100%; height:100%;}
    }

    &.open{
      transform:rotateY(-178deg); z-index:0 !important;
    }
  }

  .copyRight{
    padding:30px; font-size:12px; color:#848484;
    transform:rotateY(180deg);
    display:flex; align-content:flex-end; flex-wrap:wrap; height:100%;
    p{width:100%}
  }
}
</style>
